<!DOCTYPE html>
<html>

<head>
	<title>资源</title>
</head>

<body>
	<div style="padding: 16px;">
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="tablePerm" lay-filter="tablePerm" data-row="choiceData"></table>
				<script type="text/html" id="toolbar">
		  		<div class="layui-btn-container">
		    		<button class="layui-btn layui-btn-sm layui-hide" data-perm="permission/add" onclick="add()"><i class="layui-icon layui-icon-addition"></i>添加</button>
		  		</div>
				</script>
				<script type="text/html" id="handbar">
		  		<a class="layui-hide" href="javascript:void(0)" data-perm="permission/edit" lay-event="custom" data-handle="edit" title="编辑"><i class="layui-icon layui-icon-edit icon-edit"></i></a>
		  		<a class="layui-hide" href="javascript:void(0)" data-perm="permission/delete" lay-event="custom" data-handle="deleteHandle" title="删除"><i class="layui-icon layui-icon-delete icon-dele"></i></a>
			</script>
			</div>
		</div>
	</div>

	<script id="dialog" type="text/html">
		<div id="dialogContent" style="padding: 20px;">
		<form  class="layui-form"  id="dialogForm"  lay-filter="dialogForm"  onsubmit="return beforeSubmit();" >
			<input type="text" name="id" hidden>
		 
		  <div class="layui-form-item">
		    <label class="layui-form-label required">类型</label>
		    <div class="layui-input-block">
		      <select name="type" lay-filter="type" lay-verify="required" lay-verType="tips">
		        <option value="01">目录</option>
				<option value="02">菜单</option>
				<option value="03">按钮</option>
		      </select>
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">目录</label>
		    <div class="layui-input-block">
		      <select name="catalog"  lay-filter="catalog"  lay-verType="tips">
		      </select>
		     </div>
  		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">菜单</label>
		    <div class="layui-input-block">
		      <select name="menu"  lay-verType="tips">
		      </select>
		     </div>
  		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label required">名称</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text"  name="title"  lay-verify="required|length"  lay-verType="tips"   data-maxlen="50"  autocomplete="off">
		     </div>
  		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label required">路径</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text"  id="addPermission_url" name="url"  autocomplete="off">
		     </div>
  		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label">排序</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="number"  name="orders" value=1  min = 0  max=999  lay-verify="required"  lay-verType="tips" autocomplete="off">
		     </div>
  		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label">图标</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text"  name="icon"   lay-verType="tips"   autocomplete="off">
		     </div>
  		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label">描述</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text"  name="description"  lay-verify="length"  lay-verType="tips"   data-maxlen="50" autocomplete="off" >
		     </div>
  		  </div>
		 
  		  <div class="layui-form-item">
		    <div class="layui-input-block" align="right"  style="height: auto">
		      <button type="submit" class="layui-btn ">保存</button>
		    </div>
		  </div>
		</form>
		</div>
	</script>
</body>

<script>
	var content = layui.content;
	var request = layui.request;
	var form = layui.form;
	var button = layui.button;
	var layer = layui.layer;
	var treeTable = layui.treeTable;
	var tableInst = null;
	var tableData = [];
	var curPerData = {};
	var dialogHtml = $("#dialog").html();
	var dialogData = {
		handle: '',
		dialogIndex: '',
	};
	$(function () {
		var options = {
			elem: "#tablePerm",
			layfilter: "tablePerm",
			toolbar: '#toolbar',
			url: 'permission/list',
			page: false,
			defaultToolbar: [],
			tree: {
				customName: {
					children: "children",
					name: "title",
					id: "id",
					pid: 'pid',
				},
				data: {
					isSimpleData: true,
				},
				view: {
					flexIconClose: '<i class="layui-icon layui-icon-addition"></i>',
					flexIconOpen: '<i class="layui-icon layui-icon-subtraction"></i>',
					showIcon: false,
					iconClose: '',
					iconOpen: '',
					iconLeaf: '',
				},
				callback:{
					beforeExpand:function(){
						layui.permission.validPerm();
					},
					onExpand:function(){
						layui.permission.validPerm();
					}
				}
			},
			cols: [[
				{field: 'title', title: '资源名称'},
				{field: 'url', title: '路径'},
				{field: 'type', title: '类型', templet: typeFormatter},
				{field: 'orders', title: '排序'},
				{field: 'icon', title: '图标', templet: '<i class="{{= d.icon }}"></i>'},
				{field: 'description', title: '描述'},
				{fixed: 'right', title: '操作', templet: '#handbar', width: 150}
			]],
			done: function (res) {
				layui.permission.validPerm();
				tableData = res.data;
			},
		};
		tableInst = content.initTreeTable(options);

		form.on('select(type)', function (data) {
			customShow(data.value);
		});
		form.on('select(catalog)', function (data) {
			initMenu();
		});

		function typeFormatter(row) {
			switch (row.type) {
				case "01":
					return ' <button class="layui-btn layui-btn-primary layui-btn-sm layui-border-green">目录</button>';
				case "02":
					return ' <button class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue">菜单</button>';
				case "03":
					return ' <button class="layui-btn layui-btn-primary layui-btn-sm layui-border-orange">按钮</button>';
				default:
					return "";
			}
		}
	})

	function choiceData(data) {
		curPerData = data;
	}

	function add() {
		dialogData.handle = "permission/add";
		dialogData.dialogIndex = content.dialog('添加资源', '600px', dialogHtml);

		if (curPerData.type) {
			if (curPerData.type == '01') {
				customShow('02')
				form.val("dialogForm", {type: "02", catalog: curPerData.id})
			} else if (curPerData.type == '02') {
				customShow('03')
				form.val("dialogForm", {type: "03", catalog: curPerData.pid})
				initMenu();
				form.val("dialogForm", {menu: curPerData.id})
			} else if (curPerData.type == '03') {
				customShow('03')
				tableData.forEach(function (item) {
					item.children.forEach(function (item2) {
						if (item2.id == curPerData.pid) {
							form.val("dialogForm", {type: "03", catalog: item2.pid})
							initMenu();
							form.val("dialogForm", {menu: item2.id})
						}
					})
				})
			}
		} else {
			customShow('01')
		}
	}

	function edit(row) {
		dialogData.handle = "permission/edit";
		dialogData.dialogIndex = content.dialog('修改资源', '600px', dialogHtml);
		form.val("dialogForm", row)
		$("form [name='type']").prop("disabled", true)
		customShow(row.type)
		if (row.type == "02") {
			$("form [name='catalog']").prop("disabled", true)
			form.val("dialogForm", {catalog: row.pid})
		} else if (row.type == "03") {
			$("form [name='catalog']").prop("disabled", true)
			$("form [name='menu']").prop("disabled", true)
			tableData.forEach(function (item) {
				item.children.forEach(function (item2) {
					if (item2.id == row.pid) {
						form.val("dialogForm", {catalog: item2.pid})
						initMenu();
						form.val("dialogForm", {menu: item2.id})
					}
				})
			})
		}

	}

	function deleteHandle(row) {
		content.confirm("确认删除资源" + row.title, function () {
			request.postAlert("permission/delete", {id: row.id}).then(res => {
				tableInst.reloadData();
			})
		})
	}

	function beforeSubmit() {
		var btn = button.load({elem: "#dialogForm button[type='submit']"});
		if (!form.validate(".layui-form")) {
			btn.stop();
			return false;
		}
		var data = form.val("dialogForm");
		if (data.type == '01') {
			data.pid = '0'
		} else if (data.type == '02') {
			data.pid = data.catalog
		} else if (data.type == '03') {
			data.pid = data.menu
		}
		request.postAlert(dialogData.handle, data).then(res => {
			layer.close(dialogData.dialogIndex);
			tableInst.reloadData();
		}).catch(err => {
			btn.stop();
		})
		return false;
	}

	function customShow(type) {
		initCatalog();
		initMenu();
		form.render();
		switch (type) {
			case "01": {
				$("form [name='catalog']").parents(".layui-form-item").hide();
				$("form [name='menu']").parents(".layui-form-item").hide();
				$("form [name='icon']").parents(".layui-form-item").show();
			}
				break;
			case "02": {
				$("form [name='catalog']").parents(".layui-form-item").show();
				$("form [name='menu']").parents(".layui-form-item").hide();
				$("form [name='icon']").parents(".layui-form-item").show();
			}
				break;
			case "03": {
				$("form [name='catalog']").parents(".layui-form-item").show();
				$("form [name='menu']").parents(".layui-form-item").show();
				$("form [name='icon']").parents(".layui-form-item").hide();
			}
				break;
		}
	}

	function initCatalog() {
		var html = ""
		tableData.forEach(function (item) {
			if (item.type == "01") {
				html += '<option value="' + item.id + '">' + item.title + '</option>'
			}
		})
		$("form [name='catalog'").html(html);
		form.render("select");
	}

	function initMenu() {
		var value = form.val("dialogForm").catalog;
		var html = '';
		tableData.forEach(function (item) {
			if (item.id == value) {
				item.children.forEach(function (item2) {
					html += '<option value="' + item2.id + '">' + item2.title + '</option>'
				})
			}
		})
		$("form [name='menu']").html(html);
		form.render("select");
	}
</script>
<style scoped>
	.icon-edit {
		font-size: 20px;
		color: #2f60c2;
		margin-right: 10px;
	}

	.icon-dele {
		font-size: 20px;
		color: #ff5722;
		margin-right: 10px;
	}
</style>

</html>